<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="breadNav" style="margin: 20px 0 20px 20px;">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-home">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-position" :to="{ path: '/eva' }"><a href="/">评价管理</a></el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-position">查看评价详情</el-breadcrumb-item>
        </el-breadcrumb>  
    </div>
    <!-- 查看详情 -->
    <div class="checkList">
        <el-form ref="sizeForm" v-model="sizeForm" label-width="80px" size="mini">
            <el-form-item  label="订单号:">
                <span>{{sizeForm.listCode}}</span>
            </el-form-item>
            <el-form-item label="评价商品:">
                <span>{{sizeForm.store}}</span>
            </el-form-item>
            <el-form-item label="评价买家:">
                <span>{{sizeForm.evalbuyer}}</span>
            </el-form-item>
            <el-form-item label="评价等级:">
                <div class="block">
                    <el-rate
                        v-model="value2"
                        :colors="colors">
                    </el-rate>
                </div>
            </el-form-item>
            <el-form-item label="首次评价:">
                <span>{{sizeForm.firstEval}}</span>
                <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="onSubmit">返回列表</el-button>
            </el-form-item>
        </el-form>
    </div>
    

  </div>
</template>

<script>
import {getLookUpList} from '../../../api'
export default {
    data() {
      return {
        sizeForm: [],
        // 评分
        value2:null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        // 图片上传
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    created() {
      getLookUpList().then(res => {
        // console.log(res)
        this.sizeForm = res.data[0]
        console.log(this.sizeForm);
      })
    },
    methods: {
      onSubmit() {
        console.log('submit!');
        this.$router.push('/eva')
      },
      // 图片上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    },
}
</script>

<style lang="scss" scoped>
.checkList {width:1000px;margin:0 auto;}
</style>